<template>
  <div class="apply">
    <div class="box_region">
      <div class="left">申请加盟区域</div>
      <div class="right" @click="addrPop()">
        <div ref="address">{{agent.address}}</div>
      </div>
    </div>
    <div class="box">
      <div class="left">姓名</div>
      <div class="right">
        <input ref="username" type="text" v-model.trim="agent.username">
      </div>
    </div>
    <div class="box">
      <div class="left">身份证号</div>
      <div class="right">
        <input ref="idCard" type="text" v-model.trim="agent.idCard">
      </div>
    </div>
    <div class="box">
      <div class="left">联系电话</div>
      <div class="right">
        <input ref="phone" type="text" v-model.trim="agent.phone">
      </div>
    </div>
    <div class="box_notes">
      *注：请填写您的真实资料，确认提交后，公司将会在3个工作日内联系您
    </div>
    <div class="box_btn">
      <input type="button" value="提交" @click="applyAgent()">
    </div>
    <!--地址选择弹窗-->
    <div class="addr-pop" :class="{popToggle:showAddr}">
      <div style="width:100%;height:100%;" @click="showAddr=false;"></div>
      <div class="ap-bg">
        <div class="confrim-btn"><span @click="confoirmBtn()">确定</span></div>
        <city-picker></city-picker>
      </div>
    </div>
  </div>
</template>

<script>
  import global from '../public/global.vue'

  export default {
    name: "apply",
    data() {
      return {
        agent: {},
        showAddr: false,//显示地址弹窗
      }
    },
    created: function () {
      document.title = "申请加盟区域";
    },
    methods: {
      //地址弹窗
      addrPop() {
        this.showAddr =  true;
      },
      //确定 所选地址
      confoirmBtn() {
        let data = this.$children[0]._data;
        this.showAddr = false;
        this.agent.address = (data.selectProvince?data.selectProvince:'') + (data.selectCity?data.selectCity:'') + (data.selectCounty?data.selectCounty:'');
      },
      applyAgent() {
        let agent = new Object();
        agent.address = this.agent.address;
        agent.username = this.$refs.username.value;
        agent.idCard = this.$refs.idCard.value;
        agent.phone = this.$refs.phone.value;
//        console.log(agent);
        if (!agent.address || !agent.username || !agent.idCard|| !agent.phone) {
          alert("输入不正确")
          return;
        }
        let params = new URLSearchParams();
        params.append("address", agent.address);
        params.append("username", agent.username);
        params.append("idCard", agent.idCard);
        params.append("phone", agent.phone);
        params.append("referee", "");
        params.append("autoClass", 1);
        this.$http({
          url: global.apiUrl + '/agent/ApplyAgent',
          method: 'post',
          data: params,
        }).then(res => {
          alert(res.data.msg)
          setTimeout(function () {
//            self.$router.go(-1)
          }, 1500)
        })

      },
    },

  }
</script>

<style lang="less" scoped>
  .apply {
    width: 100%;
    /*min-height: 120px;*/
    background: #FFF;
    .box_region {
      width: 90%;
      /*min-height: 40px;*/
      padding:3% 0;
      border-bottom: 1px dashed #a7a5a5;
      margin: 0 auto;
      .left {
        display: inline-block;
        width: 35%;
        /*float: left;*/
        /*height: 40px;*/
        /*line-height: 40px;*/
        color: #a7a5a5;
        font-size: 0.9rem;
        vertical-align: top;

      }
      .right {
        display: inline-block;
        width: 63%;
        /*height: 40px;*/
        /*float: left;*/
        vertical-align: top;
        div{
          /*line-height: 40px;*/
          width:100%;
          min-height:24px;
          font-size: 0.9rem;
        }
      }
      .right > input {
        width: 95%;
        height: 38px;
        border: none;
        padding-left: 10px;
        font-size: 1rem;
        outline: none;
      }
    }
    .box {
      width: 90%;
      /*min-height: 40px;*/
      border-bottom: 1px dashed #a7a5a5;
      margin: 0 auto;
      .left {
        display: inline-block;
        width: 25%;
        /*height: 40px;*/
        /*float: left;*/
        /*line-height: 40px;*/
        color: #a7a5a5;
        font-size: 0.9rem;
      }
      .right {
        display: inline-block;
        width: 73%;
        /*height: 40px;*/
        /*float: left;*/
      }
      .right > input {
        width: 95%;
        height: 38px;
        border: none;
        padding-left: 10px;
        font-size: 0.9rem;
        outline: none;
      }
    }
    .box_notes {
      width: 95%;
      margin: 10px auto;
      font-size: 0.6rem;
      color: #FB0000;
    }
    .box_btn {
      width: 92%;
      margin: 20px auto;
    }
    .box_btn > input {
      width: 100%;
      height: 35px;
      background: #D53F40;
      outline: none;
      border: none;
      color: #FFF;
      font-size: 1rem;
      border-radius: 6px;
      letter-spacing: 5px;
    }
    /*地址弹窗*/
    .addr-pop {
      position: fixed;
      top: 100%;
      left: 0;
      background: transparent;
      padding: 0 1%;
      width: 100%;
      height: 100%;
      transition: all .5s;
      .ap-bg {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 410px;
        background: #eee;
      }
      .confrim-btn {
        width: 100%;
        padding: 2.5% 2.5%;
        text-align: right;
        span {
          font-size: 0.9rem;
          border: 1px solid #09BB07;
          color: #09BB07;
          padding: 3px 3%;
          border-radius: 5px;
        }
      }

    }
    .popToggle {
      top: 0;
    }
  }
</style>
